<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=500, user-scalable=no">-->
    <title>BUY Follow Your Heart</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/Map.js" type="text/javaScript"></script>
    <script src="js/index.js" type="text/javaScript"></script>
</head>

<body>
   <div class="body-container">
    <div class="header">
    <p style="display:none" id="cId">${cId}</p>
        <div class="nav">
           <h2>有家美食店</h2>
            <ul>
                <c:if  test="${name != null}">               
                <li><a href="LogoutServlet">logout</a></li>
                <li><a href="historyOrder.jsp">Order</a></li>
                <li><a href="javaScript(0);">${name}</a></li>
                </c:if>
                <c:if test="${name == null}">                               
                <li><a href="register.jsp">Register</a></li>
                <li><a href="login.jsp">Login</a></li>
                </c:if>               
            </ul>
        </div>
    </div>
    <div class="container">
    <div class="contentWrap">
    <c:forEach var="dish" items="${dishList}" varStatus="state" >
    <c:if test="${(state.index)%3==0}">
    <ul class="content">
    </c:if>
    <li>
        <div class="food-item">
            <img class="food-pic" src="${dish.dPic }" alt="food1">
            <p style="display:none;" class="dId">${dish.dId }</p>
            <p>${dish.dName }</p>
            <p>￥<span>${dish.dPrice }</span>
                <button class="buy-btn"  id="buy${state.index}">buy</button>
            </p>
        </div>
    </li>
    <c:if test="${(state.index)%3==2}">
    </ul>
    </c:if> 
    </c:forEach>
        
    </div>
    <div class="sidebar">
    <h3>My Cart</h3>

    <table class="cart_table" id="cart_table">
        <tr>
            <th>序号</th>
            <th>图片</th>
            <th>商品名</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        
        <tr>
            
        </tr>
    </table>
    <p class="sumPrice" id="sumPrice">Sum:￥</p>
  </div>
</div>
</div>
<div class="footer">footer</div>
<script>
    
</script>
</body>
</html>